<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8" />
        <title>Admantium - Admin Control Panel</title>
        
        <!-- CSSs -->
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/960.css" />
        <link rel="stylesheet" href="css/icons.css">
        <link rel="stylesheet" href="css/tipsy.css">
        <link rel="stylesheet" href="css/formalize.css">
        <link rel="stylesheet" href="css/prettyPhoto.css">
        <link rel="stylesheet" href="css/jquery-ui-1.8.18.custom.css">
        <link rel="stylesheet" href="css/chosen.css">
        <link rel="stylesheet" href="css/ui.spinner.css">
        <link rel="stylesheet" href="css/jquery.jqplot.min.css" />
        <link rel="stylesheet" href="css/fullcalendar.css" />
        <link rel="stylesheet" href="css/jquery.miniColors.css" />
        <link rel="stylesheet" href="css/elrte.min.css" />
        <link rel="stylesheet" href="css/elfinder.css" />
        <link rel="stylesheet" href="css/main.css" />

        <!-- JAVASCRIPTs -->
        <!--[if lt IE 9]>
            <script language="javascript" type="text/javascript" src="js/jqPlot/excanvas.min.js"></script>
            <script language="javascript" type="text/javascript" src="js/html5shiv.js"></script>
        <![endif]-->
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui-1.8.18.custom.min.js"></script>
        <script src="js/jquery.tipsy.js"></script>
        <script src="js/jquery.formalize.min.js"></script>
        <script src="js/jquery.modal.js"></script>
        <script src="js/prefixfree.min.js"></script>
        <script src="js/datables/js/jquery.dataTables.min.js"></script>
        <script src="js/jquery.prettyPhoto.js"></script>
        <script src="js/jquery.autogrowtextarea.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/jquery.fileinput.js"></script>
        <script src="js/chosen.jquery.min.js"></script>
        <script src="js/ui.checkBox.js"></script>
        <script src="js/ui.spinner.min.js"></script>
        <script src="js/jquery.loading.js"></script>
        <script src="js/jquery.path.js"></script>
        <script src="js/jqPlot/jquery.jqplot.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.cursor.min.js"></script>
        <!-- # -->
        <script src="js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.dragable.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.ohlcRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.trendline.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script src="js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
        <!-- /# -->
        <script src="js/fullcalendar.min.js"></script>
        <script src="js/jquery.miniColors.min.js"></script>
        <script src="js/jquery.maskedinput-1.3.min.js"></script>
        <script src="js/jquery-ui-timepicker-addon.js"></script>
        <script src="js/elrte.min.js"></script>
        <script src="js/elfinder.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/jquery.metadata.js"></script>
        <script src="js/main.js"></script>
        <script src="js/demo.js"></script>
    </head>
    <body>
        <!-- wrapper -->
        <div id="wrapper">
            <header>
                <div class="container_12">
                    <div class="grid_12">
                        <!-- navigation menu -->
                        <nav class="main-nav">
                            <ul>
                                <li class="active"><a href="dashboard.html" title="Dashboard"><span class="glyph cloud"></span> Dashboard</a></li>
                                <li>
                                    <a href="#" title="Elements"><span class="glyph archive"></span> Elements</a>
                                    <ul class="submenu">
                                        <li><a href="miscellaneous.html" title="Miscellaneous">Miscellaneous</a></li>
                                        <li><a href="form.html" title="Form">Form</a></li>
                                        <li><a href="notifications.html" title="Notifications">Notifications</a></li>
                                        <li><a href="icons.html" title="Icons">Icons</a></li>
                                        <li><a href="buttons.html" title="Buttons">Buttons</a></li>
                                        <li><a href="file-manager.html" title="File Manager">File Manager</a></li>
                                        <li><a href="calendar.html" title="Calendar">Calendar</a></li>
                                        <li><a href="960.html" title="960 Grid System">960 Grid System</a></li>
                                        <li><a href="boxes-and-typography.html" title="Boxes and Typography">Boxes and Typography</a></li>
                                    </ul>
                                </li>
                                <li><a href="gallery.html" title="Charts"><span class="glyph movie"></span> Gallery</a></li>
                                <li>
                                    <a href="#" title="Tables"><span class="glyph list"></span> Tables</a>
                                    <ul class="submenu">
                                        <li><a href="regular-tables.html" title="Regular Tables">Regular Tables</a></li>
                                        <li><a href="interactive-tables.html" title="Interactive Tables">Interactive Tables</a></li>
                                    </ul>
                                </li>
                                <li><a href="charts.html" title="Charts"><span class="glyph rating"></span> Charts</a></li>
                                <li><a href="login.html" title="Logout"><span class="glyph logout"></span> Logout</a></li>
                            </ul>
                        </nav>
                        <!-- /navigation menu -->

                        <!-- bar -->
                        <ul class="bar">
                            <li class="search">
                                <div>
                                    <form>
                                        <!-- the "L" value represents the icon, don't change -->
                                        <input type="submit" value="L" title="Click to search" class="tooltip glyph" />
                                        <input type="text" placeholder="What you want to search?" name="s" />
                                    </form>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph opened-chat"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph comment"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="glyph settings"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="edit profile" class="tooltip">
                                    <span class="glyph user"></span>
                                    <span class="text">admin</span>
                                </a>
                            </li>
                        </ul>
                    </div>                
                </div>
            </header>

            <section id="main">
                <div class="container_12">
                    <div class="grid_12" id="content-top">
                        <div id="logo">
                            <img src="img/logo.png" alt="logo" />
                        </div>
                        <nav>
                            <ul>
                                <li>
                                    <a href="error-page.html">
                                        <span class="glyph close"></span>
                                        Error Page
                                    </a>
                                </li>
                                <li>
                                    <a href="#myModal" class="modal">
                                        <span class="glyph open-in-new-window"></span>
                                        Modal
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyph zoom-in"></span>
                                        Quick Post
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="glyph terminal"></span>
                                        Quick Action
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <div id="content">
                        <div class="extension top inleft breadcrumbs">
                            <nav>
                                <ul>
                                    <li><a href="#">optional</a> <span class="divider"></span></li>
                                    <li><a href="#">bread</a> <span class="divider"></span></li>
                                    <li><a href="#">crumbs</a> <span class="divider"></span></li>
                                    <li><a href="#">here</a></li>
                                </ul>
                            </nav>
                        </div>

                    <!-- The modal -->
                    <div class="box grid_8" id="myModal" hidden>
                        <header>
                            <div class="inner">
                                <div class="left title">
                                    <h1>Modal</h1>
                                </div>
                                <div class="right">
                                    <a href="#" class="close">close</a>
                                </div>
                            </div>
                        </header>
                    
                        <div class="box-content">
                            <p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod <em>tincidunt</em> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation <strong>ullamcorper suscipit</strong> lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <footer class="pane">
                                <a href="#" class="close bt red">Close modal</a>
                                <a href="#" class="bt blue">Custom button</a>
                            </footer>
                        </div>
                    </div>

                        <div class="main-box">
                            <!-- # Charts  -->
                            <header class="grid_12 head">
                                <h1>Charts</h1>
                                <span class="divider"></span>
                            </header>


                            <div class="grid_12">
                                <div class="box">
                                    <header>
                                        <div class="inner">
                                            <div class="left title">
                                                <h1>Animated Chart</h1>
                                            </div>
                                            <div class="right">
                                                <a href="#" class="close">close</a>
                                            </div>
                                        </div>
                                    </header>
                                
                                    <div class="box-content">
                                        <div id="chart4"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="grid_6">
                                <div class="box">
                                    <header>
                                        <div class="inner">
                                            <div class="left title">
                                                <h1>Vertical and Horizontal Bar Charts</h1>
                                            </div>
                                            <div class="right">
                                                <a href="#" class="close">close</a>
                                            </div>
                                        </div>
                                    </header>
                                
                                    <div class="box-content">
                                        <div id="chart1"></div>
                                        <div id="chart2"></div>
                                        <div id="chart3"></div>
                                        <div id="info3">You Clicked: Nothing yet.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="grid_6">
                                <div class="box">
                                    <header>
                                        <div class="inner">
                                            <div class="left title">
                                                <h1>Dragging Points, Cursor and Trend Lines.</h1>
                                            </div>
                                            <div class="right">
                                                <a href="#" class="close">close</a>
                                            </div>
                                        </div>
                                    </header>
                                
                                    <div class="box-content">
                                        <div id="chart5"></div>
                                    </div>
                                </div>
                                <div class="box">
                                    <header>
                                        <div class="inner">
                                            <div class="left title">
                                                <h1>Open Hi Low Close and Candlestick Charts</h1>
                                            </div>
                                            <div class="right">
                                                <a href="#" class="close">close</a>
                                            </div>
                                        </div>
                                    </header>
                                
                                    <div class="box-content">
                                        <div id="chart6"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- /wrapper -->

        <footer>
            <div class="container_12">
                <p>&copy; Copyright 2012 - Your Company | Lead Developer - <a href="#" target="_blank">Your name</a></p>
            </div>
        </footer>
        <script>
        if($('#chart1')[0])
        (function(){
            var s1 = [200, 600, 700, 1000];
            var s2 = [460, -210, 690, 820];
            var s3 = [-260, -440, 320, 200];
            // Can specify a custom tick Array.
            // Ticks should match up one for each y value (category) in the series.
            var ticks = ['May', 'June', 'July', 'August'];
            
            var plot1 = $.jqplot('chart1', [s1, s2, s3], {
                // The "seriesDefaults" option is an options object that will
                // be applied to all series in the chart.
                seriesDefaults:{
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {fillToZero: true}
                },
                // Custom labels for the series are specified with the "label"
                // option on the series option.  Here a series option object
                // is specified for each series.
                series:[
                    {label:'Hotel'},
                    {label:'Event Regristration'},
                    {label:'Airfare'}
                ],
                // Show the legend and put it outside the grid, but inside the
                // plot container, shrinking the grid to accomodate the legend.
                // A value of "outside" would not shrink the grid and allow
                // the legend to overflow the container.
                legend: {
                    show: true,
                    placement: 'outsideGrid'
                },
                axes: {
                    // Use a category axis on the x axis and use our custom ticks.
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer,
                        ticks: ticks
                    },
                    // Pad the y axis just a little so bars can get close to, but
                    // not touch, the grid boundaries.  1.2 is the default padding.
                    yaxis: {
                        pad: 1.05,
                        tickOptions: {formatString: '$%d'}
                    }
                }
            });
        })();

        if($('#chart2')[0])
        (function(){
            // For horizontal bar charts, x an y values must will be "flipped"
            // from their vertical bar counterpart.
            var plot2 = $.jqplot('chart2', [
                [[2,1], [4,2], [6,3], [3,4]],
                [[5,1], [1,2], [3,3], [4,4]],
                [[4,1], [7,2], [1,3], [2,4]]], {
                seriesDefaults: {
                    renderer:$.jqplot.BarRenderer,
                    // Show point labels to the right ('e'ast) of each bar.
                    // edgeTolerance of -15 allows labels flow outside the grid
                    // up to 15 pixels.  If they flow out more than that, they
                    // will be hidden.
                    pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
                    // Rotate the bar shadow as if bar is lit from top right.
                    shadowAngle: 135,
                    // Here's where we tell the chart it is oriented horizontally.
                    rendererOptions: {
                        barDirection: 'horizontal'
                    }
                },
                axes: {
                    yaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                    }
                }
            });
        })();

        if($('#chart3')[0])
        (function(){
          var s1 = [2, 6, 7, 10];
          var s2 = [7, 5, 3, 4];
          var s3 = [14, 9, 3, 8];
          plot3 = $.jqplot('chart3', [s1, s2, s3], {
            // Tell the plot to stack the bars.
            stackSeries: true,
            captureRightClick: true,
            seriesDefaults:{
              renderer:$.jqplot.BarRenderer,
              rendererOptions: {
                  // Put a 30 pixel margin between bars.
                  barMargin: 30,
                  // Highlight bars when mouse button pressed.
                  // Disables default highlighting on mouse over.
                  highlightMouseDown: true   
              },
              pointLabels: {show: true}
            },
            axes: {
              xaxis: {
                  renderer: $.jqplot.CategoryAxisRenderer
              },
              yaxis: {
                // Don't pad out the bottom of the data range.  By default,
                // axes scaled as if data extended 10% above and below the
                // actual range to prevent data points right on grid boundaries.
                // Don't want to do that here.
                padMin: 0
              }
            },
            legend: {
              show: true,
              location: 'ne'
            }     
          });
          // Bind a listener to the "jqplotDataClick" event.  Here, simply change
          // the text of the info3 element to show what series and ponit were
          // clicked along with the data for that point.
          $('#chart3').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {
              $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
          );
        })();

        if($('#chart4')[0])
        (function () {
            var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000],
            [2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];
            var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400],
            [2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];
         
            plot1 = $.jqplot("chart4", [s2, s1], {
                // Turns on animatino for all series in this plot.
                animate: true,
                // Will animate plot on calls to plot1.replot({resetAxes:true})
                animateReplot: true,
                cursor: {
                    show: true,
                    zoom: true,
                    looseZoom: true,
                    showTooltip: false
                },
                series:[
                    {
                        pointLabels: {
                            show: true
                        },
                        renderer: $.jqplot.BarRenderer,
                        showHighlight: false,
                        yaxis: 'y2axis',
                        rendererOptions: {
                            // Speed up the animation a little bit.
                            // This is a number of milliseconds. 
                            // Default for bar series is 3000. 
                            animation: {
                                speed: 2500
                            },
                            barWidth: 15,
                            barPadding: -15,
                            barMargin: 0,
                            highlightMouseOver: false
                        }
                    },
                    {
                        rendererOptions: {
                            // speed up the animation a little bit.
                            // This is a number of milliseconds.
                            // Default for a line series is 2500.
                            animation: {
                                speed: 3000
                            }
                        }
                    }
                ],
                axesDefaults: {
                    pad: 0
                },
                axes: {
                    // These options will set up the x axis like a category axis.
                    xaxis: {
                        tickInterval: 1,
                        drawMajorGridlines: false,
                        drawMinorGridlines: true,
                        drawMajorTickMarks: false,
                        rendererOptions: {
                        tickInset: 0.5,
                        minorTicks: 1
                    }
                    },
                    yaxis: {
                        tickOptions: {
                            formatString: "$%'d"
                        },
                        rendererOptions: {
                            forceTickAt0: true
                        }
                    },
                    y2axis: {
                        tickOptions: {
                            formatString: "$%'d"
                        },
                        rendererOptions: {
                            // align the ticks on the y2 axis with the y axis.
                            alignTicks: true,
                            forceTickAt0: true
                        }
                    }
                },
                highlighter: {
                    show: true,
                    showLabel: true,
                    tooltipAxes: 'y',
                    sizeAdjust: 7.5 , tooltipLocation : 'ne'
                }
            });
           
        })();

        if($('#chart5')[0])
        (function () {
         
          $.jqplot.config.enablePlugins = true;
         
          s1 = [['23-May-08',1],['24-May-08',4],['25-May-08',2],['26-May-08', 6]];
         
          plot1 = $.jqplot('chart5',[s1],{
             title: 'Highlighting, Dragging, Cursor and Trend Line',
             axes: {
                 xaxis: {
                     renderer: $.jqplot.DateAxisRenderer,
                     tickOptions: {
                         formatString: '%#m/%#d/%y'
                     },
                     numberTicks: 4
                 },
                 yaxis: {
                     tickOptions: {
                         formatString: '$%.2f'
                     }
                 }
             },
             highlighter: {
                 sizeAdjust: 10,
                 tooltipLocation: 'n',
                 tooltipAxes: 'y',
                 tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
                 useAxesFormatters: false
             },
             cursor: {
                 show: true
             }
          });
        })();

        if($('#chart6')[0])
        (function(){
           var ohlc = [
              ['06/15/2009 16:00:00', 136.01, 139.5, 134.53, 139.48],
              ['06/08/2009 16:00:00', 143.82, 144.56, 136.04, 136.97],
              ['06/01/2009 16:00:00', 136.47, 146.4, 136, 144.67],
              ['05/26/2009 16:00:00', 124.76, 135.9, 124.55, 135.81],
              ['05/18/2009 16:00:00', 123.73, 129.31, 121.57, 122.5],
              ['05/11/2009 16:00:00', 127.37, 130.96, 119.38, 122.42],
              ['05/04/2009 16:00:00', 128.24, 133.5, 126.26, 129.19],
              ['04/27/2009 16:00:00', 122.9, 127.95, 122.66, 127.24],
              ['04/20/2009 16:00:00', 121.73, 127.2, 118.6, 123.9],
              ['04/13/2009 16:00:00', 120.01, 124.25, 115.76, 123.42],
              ['04/06/2009 16:00:00', 114.94, 120, 113.28, 119.57],
              ['03/30/2009 16:00:00', 104.51, 116.13, 102.61, 115.99],
              ['03/23/2009 16:00:00', 102.71, 109.98, 101.75, 106.85],
              ['03/16/2009 16:00:00', 96.53, 103.48, 94.18, 101.59],
              ['03/09/2009 16:00:00', 84.18, 97.2, 82.57, 95.93],
              ['03/02/2009 16:00:00', 88.12, 92.77, 82.33, 85.3],
              ['02/23/2009 16:00:00', 91.65, 92.92, 86.51, 89.31],
              ['02/17/2009 16:00:00', 96.87, 97.04, 89, 91.2],
              ['02/09/2009 16:00:00', 100, 103, 95.77, 99.16],
              ['02/02/2009 16:00:00', 89.1, 100, 88.9, 99.72],
              ['01/26/2009 16:00:00', 88.86, 95, 88.3, 90.13],
              ['01/20/2009 16:00:00', 81.93, 90, 78.2, 88.36],
              ['01/12/2009 16:00:00', 90.46, 90.99, 80.05, 82.33],
              ['01/05/2009 16:00:00', 93.17, 97.17, 90.04, 90.58],
              ['12/29/2008 16:00:00', 86.52, 91.04, 84.72, 90.75],
              ['12/22/2008 16:00:00', 90.02, 90.03, 84.55, 85.81],
              ['12/15/2008 16:00:00', 95.99, 96.48, 88.02, 90],
              ['12/08/2008 16:00:00', 97.28, 103.6, 92.53, 98.27],
              ['12/01/2008 16:00:00', 91.3, 96.23, 86.5, 94],
              ['11/24/2008 16:00:00', 85.21, 95.25, 84.84, 92.67],
              ['11/17/2008 16:00:00', 88.48, 91.58, 79.14, 82.58],   
              ['11/10/2008 16:00:00', 100.17, 100.4, 86.02, 90.24],
              ['11/03/2008 16:00:00', 105.93, 111.79, 95.72, 98.24],
              ['10/27/2008 16:00:00', 95.07, 112.19, 91.86, 107.59],
              ['10/20/2008 16:00:00', 99.78, 101.25, 90.11, 96.38],
              ['10/13/2008 16:00:00', 104.55, 116.4, 85.89, 97.4],
              ['10/06/2008 16:00:00', 91.96, 101.5, 85, 96.8],
              ['09/29/2008 16:00:00', 119.62, 119.68, 94.65, 97.07],
              ['09/22/2008 16:00:00', 139.94, 140.25, 123, 128.24],
              ['09/15/2008 16:00:00', 142.03, 147.69, 120.68, 140.91]
            ];       
          var plot2 = $.jqplot('chart6',[ohlc],{
            seriesDefaults:{yaxis:'y2axis'},
            axes: {
              xaxis: {
                renderer:$.jqplot.DateAxisRenderer,
                tickOptions:{formatString:'%b %e'},
                min: "09-01-2008",
                max: "06-22-2009",
                tickInterval: "6 weeks",
              },
              y2axis: {
                tickOptions:{formatString:'$%d'}
              }
            },
            // To make a candle stick chart, set the "candleStick" option to true.
            series: [
              {
                renderer:$.jqplot.OHLCRenderer,
                rendererOptions:{ candleStick:true }
              }
            ],
            highlighter: {
              show: true,
              showMarker:false,
              tooltipAxes: 'xy',
              yvalues: 4,
              formatString:'<table class="jqplot-highlighter"> \
              <tr><td>date:</td><td>%s</td></tr> \
              <tr><td>open:</td><td>%s</td></tr> \
              <tr><td>hi:</td><td>%s</td></tr> \
              <tr><td>low:</td><td>%s</td></tr> \
              <tr><td>close:</td><td>%s</td></tr></table>'
            }
          });
             
        })();
        </script>
    </body>
</html>
